<template>
    <div class="assy">
        <div class="assy-inner">
            <!-- <div class="assy-item">
                <span class="assy-item-title">报告总数</span>
                <span class="assy-item-num">{{ statisticsData.reportNum }}</span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">图件总数</span>
                <span class="assy-item-num">{{ statisticsData.mapNum }}</span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">重点场所总数</span>
                <span class="assy-item-num">{{ statisticsData.keyLocationsNum }}</span>
            </div> -->
            <VisitsCount title="报告总数" :num="statisticsData.reportNum " />
            <VisitsCount title="图件总数" :num="statisticsData.mapNum" />
            <VisitsCount title="重点场所总数" :num="statisticsData.keyLocationsNum" />
        </div>
    </div>
</template>
<script setup>
import VisitsCount from '@/components/VisitsCount';
const props = defineProps({
    statisticsData: {
        default: {},
        type: Object,
    }
})
const { statisticsData } = toRefs(props)
watch(()=>props.statisticsData,()=>{
    statisticsData.value.reportNum = statisticsData.value.reportNum
    statisticsData.value.mapNum = statisticsData.value.mapNum
    statisticsData.value.keyLocationsNum = statisticsData.value.keyLocationsNum
}, { deep: true, immediate: true })

</script>
<style lang='scss' scoped>
.assy{
    color: #fff;
    .assy-inner{
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        justify-content: space-between;
    }
    &-item{
        width: 190px;
        height: 65px;
        background-size: 100% 100%;
        background-image: url(/src/assets/images/anbao/bg_num.png);
        margin-bottom: 10px;
        margin-left: 20px;
        &:nth-child(2){
            margin-right: 20px;
        }
        span{
            display: block;
            color: #46FFFF;
        }
        &-title{
            padding:6px 0 2px 8px;
            color: #46FFFF;
            font-size: 14px;
        }
        &-num{
            padding-left: 13px;
            font-size: 30px;
            letter-spacing: 12px;
        }
    }
}
</style>